<template>
  <!-- 用户的鱼豆变动记录 -->
  <div class="app-container">
    <div v-loading="loading">
      <el-form @submit.native.prevent :inline="true" :model="forms" class="search-form-new">
        <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
          <el-select @change="search" v-model="forms.tenantId" placeholder="请选择店铺" clearable filterable>
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="昵称">
          <el-input v-model="forms.personUserName" placeholder="请输入昵称"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="充值类型">
          <el-select v-model="forms.type" placeholder="请选择">
            <el-option v-for="item in arr" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="虞豆类型">
          <el-select @change="search" v-model="forms.msgType" placeholder="请选择" clearable>
            <el-option v-for="(item,key) in commonMaps.jifenTypeMap" :key="key" :label="item.label" :value="key">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="变动类型">
          <el-select v-model="forms.status" placeholder="请选择" clearable>
            <el-option v-for="item in koufeiArr" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="时间" prop="timer">
          <el-date-picker @change="search" clearable size="small" v-model="timer" type="daterange" value-format="yyyy-MM-dd" align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="warning" @click="chongzhi">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div style="width:200px;margin-bottom:15px" class="flex">
        <span style="flex-shrink:0">总消耗虞豆:</span>
        <el-statistic group-separator="," :precision="0" :value="sumCampNumber.sumXHCampNumber" title=""></el-statistic>
        <span style="flex-shrink:0;margin-left:20px">总充值虞豆:</span>
        <el-statistic group-separator="," :precision="0" :value="sumCampNumber.sumCZCampNumber" title=""></el-statistic>
      </div>
      <div class="table_box">
        <el-table stripe :data="list" style="width: 100%">
          <el-table-column prop="id" label="编号" width="80">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160">
          </el-table-column>
          <el-table-column prop="msg" label="详情" min-width="120">
          </el-table-column>
          <el-table-column prop="tenantName" label="店铺名称" min-width="120">
          </el-table-column>
          <el-table-column prop="createName" label="操作人">
          </el-table-column>

          <el-table-column prop="campNumber" label="变动虞豆">
          </el-table-column>
          <el-table-column prop="lastNumber" label="剩余虞豆">
          </el-table-column>
          <!-- <el-table-column label="类型" width="120">
            <template #default="{ row }">
              <el-button type="primary" size="mini" disabled v-if="row.type == 1">充值记录</el-button>
              <el-button type="primary" size="mini" disabled v-if="row.type == 2">服务处理进度</el-button>
              <el-button type="primary" size="mini" disabled v-if="row.type != 2 && row.type != 1">虞豆记录</el-button>
            </template>
          </el-table-column> -->
          <el-table-column label="虞豆类型" width="120" prop="msgType">
            <template #default="{ row }">
              <el-tag :type="commonMaps.jifenTypeMap[row.msgType].type">{{commonMaps.jifenTypeMap[row.msgType].label}}</el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column label="变动类型" width="120">
            <template #default="{ row }">
              <el-button type="primary" size="mini" disabled v-if="row.status == 1">充值</el-button>
              <el-button type="primary" size="mini" disabled v-if="row.status == 2">扣除</el-button>
            </template>
          </el-table-column> -->
          <!-- <el-table-column prop="businessId" label="业务Id">
          </el-table-column> -->
          <!-- <el-table-column prop="gameName" label="游戏昵称">
          </el-table-column> -->
          <!-- <el-table-column prop="saleId" label="供应商Id">
          </el-table-column>
          <el-table-column prop="saleName" label="供应商昵称" width="120">
          </el-table-column> -->
          <!-- <el-table-column label="消息结果">
            <template #default="{ row }">
              <el-button type="primary" size="mini" disabled v-if="row.resMsg == 1">还未处理</el-button>
              <el-button type="primary" size="mini" disabled v-if="row.resMsg == 2">正在处理</el-button>
              <el-button type="primary" size="mini" disabled v-if="row.resMsg == 3">处理完成</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <pagination v-show="total > 0" :total="total" :page.sync="forms.pageNum" :limit.sync="forms.pageSize" @pagination="getMessage" />
    </div>
  </div>
</template>

<script>
import { RecordQuery } from "@/api/shangcheng";
export default {
  data() {
    return {
      loading: false,
      forms: {
        pageSize: 10,
        pageNum: 1,
        personUserName: null,
        type: null,
        msgType: null,
        status: null,
        tenantId:null,
      },
      timer: [],
      list: [],
      total: 0,
      arr: [
        { name: "充值记录", id: 1 },
        { name: "服务处理进度", id: 2 },
        { name: "虞豆记录", id: 3 },
      ],
      koufeiArr: [
        { name: "充值", id: 1 },
        { name: "扣除", id: 2 },
      ],
      sumCampNumber: {
        sumXHCampNumber: 0,
        sumCZCampNumber: 0,
      },
    };
  },
  created() {
    //  this.getMessage();
    if(this.tenantList&&this.tenantList.length){
      this.forms.tenantId = this.tenantList[0].tenantId
      this.search();
    }
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
  },
  methods: {
    search(){
      this.forms.pageNum = 1
      this.getMessage()
    },
    async getMessage() {
      this.loading = true;
      if (this.timer && this.timer.length == 2) {
        this.forms.startTime = this.timer[0] + " 00:00:00";
        this.forms.endTime = this.timer[1] + " 23:59:59";
      } else {
        this.forms.startTime = "";
        this.forms.endTime = "";
      }
      const res = await RecordQuery(this.forms);
      this.loading = false;
      this.sumCampNumber = res.params;
      this.list = res.rows;
      this.total = res.total;
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.forms.pageSize = val;
      this.getMessage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.forms.pageNum = val;
      this.getMessage();
    },
    chongzhi() {
      this.timer = [];
      this.forms = {
        pageSize: 10,
        pageNum: 1,
        personUserName: null,
        type: null,
        tenantId:null,
      };
      this.getMessage();
    },
  },
};
</script>

<style>
</style>